<script>
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'role',
  data() {
    return {
      /* tabs组件的选中项 */
      activeName: 'permisions',
      /* 加载状态 */
      loading: false,
      /* 获取当前角色拥有成员的分页数据 */
      pageParams: { page: 1, pageSize: 10 },
      /* 当前角色ID */
      currentRoleId: ''
    }
  },
  methods: {

    /* 获取角色列表的回调函数 */
    async fetchRoleList() {
      await this.$store.dispatch('roleStore/fetchRoleList')
      const currentRoleId = this.roleList[0].roleId
      this.$nextTick(() => {
        this.$refs.roleTreeRef.setCurrentKey(currentRoleId)
      })
      this.findRolePermision(currentRoleId)
      this.currentRoleId = currentRoleId
    },

    /* 获取所有权限列表的回调函数 */
    async fetchAllPermision() {
      try {
        this.loading = true
        await this.$store.dispatch('roleStore/fetchAllPermision')
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },

    /* 查询当前角色所拥有权限列表的回调函数 */
    async findRolePermision(roleId) {
      try {
        this.loading = true
        const currentRolePermisionIds = await this.$store.dispatch('roleStore/findRolePermision', roleId)
        currentRolePermisionIds.forEach((item, index) => {
          this.$refs.perTreeRef[index].setCheckedKeys(item)
        })
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },

    /* 查询当前角色所拥有成员列表的回调函数 */
    async findRoleEmplyees() {
      if (this.activeName === 'permisions') return
      try {
        this.loading = true
        await this.$store.dispatch('roleStore/findRoleEmplyees', { pageParams: this.pageParams, roleId: this.currentRoleId })
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },

    /* 角色列表el-tree组件节点被点击时的回调  */
    nodeClick(currentNode) {
      if (currentNode.roleId === this.currentRoleId) return
      this.currentRoleId = currentNode.roleId
      this.findRolePermision(currentNode.roleId)
      this.findRoleEmplyees()
    },

    /* 点击删除角色的回调函数 */
    async handleDeleteRole(roleId) {
      try {
        const deleteResult = await this.$store.dispatch('roleStore/deleteRole',roleId)
        await this.fetchRoleList()
        this.$message.success(deleteResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.findRoleEmplyees()
    },
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.findRoleEmplyees()
    }
  },

  computed: {
    ...mapState('roleStore', ['roleList', 'allPermision']),
    ...mapGetters('roleStore', ['emplyeesList', 'total'])
  },

  watch: {
    activeName(newValue, oldValue) {
      this.findRoleEmplyees()
    }
  },
  mounted() {
    this.fetchRoleList()
    this.fetchAllPermision()
  }
}
</script>

<template>
  <div class="role">

    <el-card class="left" shadow="never">
      <el-tree :data="roleList" @node-click="nodeClick" ref="roleTreeRef" node-key="roleId" highlight-current>
        <template #default="{data,node}">
          <el-row>
            <el-col :span="22"><span>{{ data.roleName }}</span></el-col>
            <el-col :span="2">
              <el-dropdown>
                <i class=" el-icon-more"></i>
                <el-dropdown-menu>
                  <el-dropdown-item>编辑角色</el-dropdown-item>
                  <el-dropdown-item @click.native="handleDeleteRole(data.roleId)">删除角色</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <el-button size="small" icon="el-icon-plus" @click="$router.push({path:'/system/addRole'})">添加角色</el-button>
    </el-card>

    <el-card class="right" shadow="never" v-loading="loading" element-loading-text="拼命加载中">
      <el-tabs v-model="activeName">
        <el-tab-pane label="功能权限" name="permisions">
          <div class="permissionList">
            <div class="permissionItem" v-for="(item,index) in allPermision">
              <div class="title">{{ item.title }}</div>
              <el-tree :data="item.children" :props="{label: 'title',disabled:()=>true}" show-checkbox default-expand-all :expand-on-click-node="false" node-key="id" ref="perTreeRef"></el-tree>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`成员(${total||0})`" name="emplyees">
          <el-table border size="small" :data="emplyeesList" :header-cell-style="{backgroundColor:'#e4e7ec'}">
            <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
            <el-table-column label="员工姓名" prop="name" align="center"></el-table-column>
            <el-table-column label="登录账号" prop="userName" align="center"></el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<style scoped lang="scss">
.role {
  min-height: 800px;
  height: 100%;
  min-width: 2100px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;

  .left {
    width: 230px;

    ::v-deep .el-card__body {
      padding: unset;

    }


    ::v-deep .el-tree-node__content {
      height: 50px;

      .el-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-right: 10px;

        span {
          font-size: 14px;
        }
      }
    }

    .el-button {
      width: 90%;
      margin-left: 12px;
      margin-top: 20px;
    }
  }


  .right {
    width: 89%;

    ::v-deep .el-card__body {
      height: 100%;

    }

    ::v-deep .el-tabs {
      height: 100%;
    }

    ::v-deep .el-tabs__content {
      height: 100%;

    }

    #pane-permisions {
      height: 100%;
    }

    .permissionList {
      display: flex;
      height: 100%;


      .permissionItem {
        flex: 1;
        margin: 0 5px;
        border-left: 1px solid #e4e7ec;
        border-right: 1px solid #e4e7ec;

        .title {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background-color: #e4e7ec;
          text-align: center;
          color: #2c2c2c;
          cursor: pointer;
        }
      }
    }

    .el-table {
      margin-bottom: 10px;
    }

    .el-pagination {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
